<template>
<div class="page">
  <navTop title="详情" />
	<img class="header_img" :src="data.imgs.split(',')[0]" alt="">
	<div class="title_h flex_ac">
		{{data.title||''}}
	  <div class="small mla flex_ac">
      <img width="12px" height="12px" class="mr4" src="~@/assets/img/project/see.png" alt="">
      <div>{{data.read_num||1}}</div>
    </div>
	</div>

  <div class="flex_ac flex_sb ml10 mr10 mb10 mt5">
    <img class="gz_img" src="~@/assets/img/my/avatar.png" alt="">
    <div class="gz_name">
      <div>用户</div>
    </div>
    <div class="btn_gz">+ 关注</div>
  </div>

	<div class="info_div">
		<div class="info_item flex_ac">
			<div class="info_name">名称</div>： <span>{{  data.name|| '-' }}</span>
		</div>
		<div class="info_item flex_ac mt10">
			<div class="info_name">数量</div>： <span>{{ data.num||'-' }}</span>
		</div>
		<div class="info_item flex_ac mt10">
			<div class="info_name">金额</div>： <span>{{ data.price||'-' }}</span>
		</div>
		<div class="info_item flex_ac mt10">
			<div class="info_name">地址</div>： <span>{{ data.address||'-' }}</span>
		</div>
	</div>
	<div class="page1">
		<div class="content" v-html="data.desc"></div>
	</div>

	<div class="h50"></div>
	<bottomDetail :data='data' type=""></bottomDetail>
</div>
</template>

<script>
	import { xuqiu } from '@/api/api.js'
	import navTop from '@/components/navTop.vue'
	import bottomDetail from '@/components/bottomDetail.vue'
	export default {
		data() {
			return {
				data:{id:'',image:'',chain_names:''},
				id:'',
			}
		},
		components:{
      bottomDetail,
      navTop
		},
		created(){
			this.id = this.$route.query.id
			this.getDetail(this.id)
		},
		methods: {
			getDetail(id){
				this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
        });
				xuqiu.getDetail({id}).then(res=>{
					this.data = res.data
					this.$toast.clear()
				})
			},
		}
	}
</script>

<style  lang="scss" scoped>
.nav{
	width: 100%;
  height: 40px;
}
.page{
  position: relative;
}
.page1{
  margin: 10px;
}
.header_img{
	width: calc(100% - 20px);
	margin-left: 10px;
	border-radius: 4px;
}
.title_h{
	font-weight: 600;
  font-size: 22px;
  color: #000000;
	margin: 0 14px;
	padding: 10px 0;
	.small{
		font-size: 12px;
		color: #666;
    font-weight: 500;
	}
}

.news_ps{
	color:#999;
	font-size:14px;
	margin: 20px 0;
}


.news_title{
	font-size:16px;
	color: #333;
	font-weight:700;
	margin-bottom:10px;
}
.news_company{
	font-size:14px;
	color:#EB7418;
	margin-bottom: 8px;
	text-decoration: underline;
}
.content{

}

.info_div{
	margin: 10px;
	border-radius: 3px;
	background: #FAFAFA;
	padding: 15px 10px;
	margin-top: 5px;
}
.info_item{
	font-size: 13px;
	color: #666;
	.info_name{
		text-align-last: justify;
		width: 56px;
	}
	span{
		color: #666;
	}
}
.label{
	height: 17px;
	line-height: 17px;
	border-radius: 3px;
	font-size: 11px;
	padding:  0 8px;
	margin-right: 10px;
}
.bg1{
	background: rgba(48,149,59,0.1);
	color: #2F953A;
}
.bg2{
	background: rgba(235,116,24,0.1);
	color: #EB7418;
}
.bg3{
	background: rgba(19,138,242,0.1);
	color: #138AF2;
}
.line_h{
	width: 100%;
	height: 5px;
background: #F0F0F0;
}
.main_title{
	font-weight: bold;
	font-size: 15px;
	color: #EB7418;
}
.gz_img{
  width: 36px;
  height: 36px;
}
.gz_name{
	font-size: 14px;
  color: #000;
  margin-right: auto;
  margin-left: 10px;
}
.btn_gz{
  width: 55px;
  height: 22px;
  background: #FA8A26;
  border-radius: 3px;
  line-height: 22px;
  text-align: center;
  font-size: 13px;
  color: #FFFFFF;
}
</style>
